<template>
	<view class="beijing1">
		<view class="" id="ggo">
			<u-navbar :placeholder="true" title="我的订单" @rightClick="rightClick" :autoBack="true" bg-color="transparent" left-icon-size="0"></u-navbar>
			<view class="" style="height: 30rpx"></view>
		</view>
		<view class="" style="position: relative">
			<image src="/static/beitu.png" mode="" style="position: absolute; z-index: 0; top: 0; width: 100vw" :style="{ height: `${gao}px` }"></image>
			<view class="" style="position: relative; z-index: 1">
				<view class="flex1" style="">
					<view class="" style="width: 50%; position: relative" @click="click(0)">
						<image v-if="current == 0" src="/static/xvanzuo.png" mode="" style="width: 100%; height: 100rpx; position: absolute"></image>
						<image v-else src="/static/weizuo.png" mode="" style="width: 100%; height: 100rpx; position: absolute"></image>
						<view class="center column" style="position: relative;100%;height: 100rpx;z-index: 1;">
							<text style="font-weight: 400; font-size: 30rpx; color: #222222">宴席订单</text>
							<view class="" style="width: 60rpx; height: 6rpx; background: #8c1608; border-radius: 3rpx; margin-top: 10rpx" v-if="current == 0"></view>
						</view>
					</view>
					<view class="" style="width: 50%; position: relative" @click="click(1)">
						<image v-if="current == 1" src="/static/xvanyou.png" mode="" style="width: 100%; height: 100rpx; position: absolute"></image>
						<image v-else src="/static/weiyou.png" mode="" style="width: 100%; height: 100rpx; position: absolute"></image>
						<view class="center column" style="position: relative;100%;height: 100rpx;z-index: 1;">
							<text style="font-weight: 400; font-size: 30rpx; color: #222222">妆造摄影订单</text>
							<view class="" style="width: 60rpx; height: 6rpx; background: #8c1608; border-radius: 3rpx; margin-top: 10rpx" v-if="current == 1"></view>
						</view>
					</view>
				</view>
				<view class="flex" style="justify-content: space-around; margin-top: 30rpx">
					<view class="xun" v-for="(item, index) in list1" :key="index" @click="click1(index)">
						<view :class="{ wei: true, xvan: index == current1 }">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="" style="padding: 0 25rpx">
					<view class="" v-if="current == 0">
						<view class="xun" v-for="(item, index) in list" :key="index" @click="yanxi(item.id)">
							<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 40rpx 30rpx; margin-top: 20rpx">
								<view class="" style="font-weight: 400; font-size: 26rpx; color: #888888">订单编号：{{ item.order_no }}</view>
								<view class="flex1" style="margin-top: 40rpx">
									<image :src="img + item.category.image" mode="" style="width: 130rpx; height: 130rpx; border-radius: 10rpx"></image>
									<view class="column between1" style="width: 100%; margin-left: 24rpx">
										<view class="between">
											<text style="font-weight: 400; font-size: 28rpx; color: #11130b">{{ item.category.title }}</text>
											<text style="font-weight: 400; font-size: 24rpx; color: #8c1608">¥{{ item.money }}</text>
										</view>
										<text style="font-weight: 400; font-size: 24rpx; color: #f4a134">开宴时间：{{ item.time_str.substring(0,10) + ' ' + item.category.time_str }}</text>
									</view>
								</view>
								<view class="if待入场" v-if="item.status == 2">
									<view class="" style="padding: 40rpx 0 20rpx 0">
										<u-line></u-line>
									</view>
									<view class="flex" style="justify-content: flex-end">
										<view class="" style="margin-right: 15rpx" @click.stop="tiaoa">
											<view class="center" style="width: 200rpx; height: 60rpx; background: rgba(140, 22, 8, 0.1); border-radius: 30rpx">
												<text style="font-weight: 400; font-size: 26rpx; color: #8c1608">妆造摄影预定</text>
											</view>
										</view>
										<view class="" style="margin-right: 15rpx">
											<view class="center" style="width: 170rpx; height: 60rpx; background: #f5f5f5; border-radius: 30rpx">
												<text style="font-weight: 400; font-size: 26rpx; color: #222222">申请退款</text>
											</view>
										</view>

										<view class="center" style="width: 170rpx; height: 60rpx; background: #8c1608; border-radius: 30rpx">
											<text style="font-weight: 400; font-size: 26rpx; color: #ffffff">核销二维码</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="current == 1">
						<view class="xun" v-for="(item, index) in list" :key="index" @click="zhuang(item.id)">
							<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 40rpx 30rpx; margin-top: 20rpx">
								<view class="" style="font-weight: 400; font-size: 26rpx; color: #888888">订单编号：{{ item.order_no }}</view>
								<u-grid :border="false" col="3">
									<u-grid-item v-for="(item1, index1) in item.clothesItem" :key="index1" :customStyle="{ paddingTop: 20 + 'rpx' }">
										<view class="center column">
											<image :src="img + item1.text.clothes.image" mode="" style="width: 130rpx; height: 130rpx; border-radius: 10rpx"></image>
											<text style="font-weight: 400; font-size: 24rpx; color: #222222">{{ item1.text.clothes.title }} x1</text>
										</view>
									</u-grid-item>
								</u-grid>
								<view class="if待入场" v-if="item.status == 2">
									<view class="" style="padding: 40rpx 0 20rpx 0">
										<u-line></u-line>
									</view>
									<view class="flex" style="justify-content: flex-end">
										<view class="" style="margin-right: 15rpx">
											<view class="center" style="width: 170rpx; height: 60rpx; background: #f5f5f5; border-radius: 30rpx">
												<text style="font-weight: 400; font-size: 26rpx; color: #222222">申请退款</text>
											</view>
										</view>
										<view class="center" style="width: 170rpx; height: 60rpx; background: #8c1608; border-radius: 30rpx">
											<text style="font-weight: 400; font-size: 26rpx; color: #ffffff">核销二维码</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="beijing"></view>
		<view class="" style="position: fixed; bottom: 0; right: 0">
			<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
		</view>
	</view>
</template>

<script>
import { feastordergetList, feastclothes_ordergetList, feastordergetOrderCount, feastclothes_ordergetOrderCount } from '../../untils/api.js';
export default {
	data() {
		return {
			gao: 0,
			current: 0,
			list1: [
				{
					name: '待入场(2)',
					status: 2
				},
				{
					name: '已完成(2)',
					status: 3
				},
				{
					name: '退款/售后(1)',
					status: 4
				}
			],
			current1: '0',
			page: 1,
			list: []
		};
	},
	onLoad(ops) {},
	onShow() {
		this.page = 1;
		this.list = [];
		this.qq();
	},
	onReady() {
		this.$nextTick(() => {
			this.jisuan();
		});
	},
	methods: {
		tiaoa() {
			uni.navigateTo({
				url: '/pagesA/zhuangzaoriqi/zhuangzaoriqi'
			});
		},
		async qq() {
			let data = {};
			let data1 = {};
			if (this.current == 0) {
				data = await feastordergetList({
					page: this.page,
					status: this.list1[this.current1].status
				});
				data1 = await feastordergetOrderCount();
			}
			if (this.current == 1) {
				data = await feastclothes_ordergetList({
					page: this.page,
					status: this.list1[this.current1].status
				});

				data1 = await feastclothes_ordergetOrderCount();
			}
			this.list = [...this.list, ...data.data.data];
			this.list1[0].name = `待入场(${data1.data.status_2})`;
			this.list1[1].name = `已完成(${data1.data.status_3})`;
			this.list1[2].name = `退款/售后(${data1.data.status_4})`;
		},
		zhuang(id) {
			uni.navigateTo({
				url: `/pagesB/zhuangzaodingdanxq/zhuangzaodingdanxq?id=${id}`
			});
		},
		yanxi(id) {
			uni.navigateTo({
				url: `/pagesB/yanxidingdanxq/yanxidingdanxq?id=${id}`
			});
		},
		click1(e) {
			this.current1 = e;
			this.page = 1;
			this.list = [];
			this.qq();
		},
		click(e) {
			this.current = e;
			this.page = 1;
			this.list = [];
			this.qq();
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		scrolltolower() {
			console.log('到底了');
		},
		height(selector, callback) {
			uni.createSelectorQuery()
				.in(this) // 使用当前上下文
				.select(selector) // 选择器作为参数
				.boundingClientRect((res) => {
					if (res) {
						console.log(res.height); // 输出高度
						callback(res.height); // 调用回调函数
					} else {
						console.warn(`Element ${selector} not found`);
						callback(0); // 如果元素未找到，返回0或其他默认值
					}
				})
				.exec();
		},
		jisuan() {
			this.$nextTick(() => {
				const info = uni.getSystemInfoSync();
				const ke = info.windowHeight;
				const di = info.safeAreaInsets.bottom;
				let dao = null;
				let tab = null;
				setTimeout(() => {
					this.height('#ggo', (h) => {
						this.gao = ke - h;
					});
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wei {
	background: #eeeeee;
	border-radius: 50rpx;
	padding: 10rpx 20rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #000000;
}
.xvan {
	background: #e5d2c5 !important;
	color: #8c1608 !important;
}
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #e6d5bf;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
</style>
